<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>宝雅智能</title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/icons-extra.css" rel="stylesheet" />
<link href="../css/app.css" rel="stylesheet" />
<script src="../js/vue_dev.js"></script>
<script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
<script src="../js/app.js"></script>
<style>
.mui-popover.mui-popover-action .mui-table-view {
	margin: 0;
}

.smart-icon {
	padding: 5px;
	background-color: #ffffff;
	border-radius: 25px;
	color: #dd524d;
}
</style>
<!-- <link rel="stylesheet" href="../layui/css/layui.css"  media="all"> -->
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<header id="vhead" class="mui-bar mui-bar-nav">
	<button onclick="openPage('my.html','my')"
		class="mui-btn mui-btn-red mui-btn-nav mui-btn-link mui-pull-left" style="font-size: 12px;">
		<span class="mui-icon mui-icon-contact"></span> <!-- {{user.name}} -->
		${ nickname }
	</button>
	<h1 class="mui-title">智能</h1>
</header>
<div id="vmain" class="mui-content">
	<div class="mui-input-group">
		<div class="mui-input-row">
			<label style="font-size: medium; color: #666666;">智能场景</label> <input
				type="text" class="mui-input mytopic" style="width: 100px;" />
				<!-- value="+ 添加" /> -->
		</div>
	</div>
	<div class="mui-input-group">
		<ul class="mui-table-view mui-grid-view mui-grid-9" id="first">

			<!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
                    <span class="mui-icon mui-icon-home smart-icon"></span>
                    <div class="mui-media-body" id="gobackhome1">回家</div>
                    	<input type="radio" name="radio" value="1">红
                    	<input type="radio" name="radio" value="1">黄
                    	<input type="radio" name="radio" value="1">绿
                    	<input type="radio" name="radio" value="1">蓝
                </li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
						<input type="radio" name="radio" value="1">开
                    	<input type="radio" name="radio" value="1">关
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
						<input type="radio" name="radio" value="1">开
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">回家</div>
				</li> -->

		</ul>
	</div>
	<br/>
	<div class="mui-input-group">
		<div class="mui-input-row">
			<label style="font-size: medium; color: #666666;">智能联动</label> <input
				type="text" class="mui-input mytopic" style="width: 100px;" />
				<!-- value="+ 添加" /> -->
		</div>
	</div>
	<div class="mui-input-group">
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
				style="width: 20%; padding-left: 0px;" id="qwer"><span
				class="mui-icon mui-icon-home smart-icon"></span>
				<div class="mui-media-body">回家</div></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
				style="width: 20%; padding-left: 0px;"><span
				class="mui-icon mui-icon-home smart-icon"></span>
				<div class="mui-media-body">回家</div></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
				style="width: 20%; padding-left: 0px;"><span
				class="mui-icon mui-icon-home smart-icon"></span>
				<div class="mui-media-body">回家</div></li>
		</ul>
	</div>
	<myfooter at4="mui-active" />
</div>
<script type="text/javascript">
	    mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005
	    });
    </script>
<script src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var url=location.href;
	//var rs = decodeURI(url).toString()
	var strUrl = JSON.stringify(location.href);
	var strSplit = strUrl.split("&")
	var renterId = strSplit[0].split("\?")[1].split("=")[1]
	var roomId = strSplit[1].split("=")[1]
	var timestamp = strSplit[2].split("=")[1]
	var sign = strSplit[3].split("=")[1].split("\"")[0];
	if(strSplit.length != 4 || renterId == '' || renterId == null || roomId == '' || roomId == null || timestamp == '' || timestamp == null || sign == '' || sign== null ){
		location.href = "<%=request.getContextPath()%>/wx/wxIllageArgument.do"
	}

	$.ajax({//这个是ajax请求
        url:"<%=request.getContextPath()%>/cotol/verifyRoomControlPage.do?renterId="+renterId+"&roomId="+roomId+"&timestamp="+timestamp+"&sign="+sign,
         type:"POST",
         success:function(result){
             //console.log(result)
             if(result.state == 0){
            	 location.href = "<%=request.getContextPath()%>/cotol/wxIllageArgument.do"
             }
         }
     });
	
    	$(function(){
    		<%--  $("#fist").load(function(){
    			   doGetObjects();
    		   });
    		
    		function doGetObjects(){
    			var roomNumber=305
    			var params={"roomNumber":roomNumber}
    			$.ajax({
   				   url:"<%=request.getContextPath()%>/wx/findRoomEquipmentByUser.do",
   				   dataType:"json",
   				   data:params,
   				   success:function(result){
   					 if(result.state==1){
   						 console.log(result.data)
   					   	setTableBodyRows(result.data);
   					   //setPagination(result.data);//定义在page.html中
   					 }else{
   					  // $("#tbodyId").html(result.message);
   					 }
   				   }
   			   });
    		}
    		function setTableBodyRows(data){
    			   var tBody=$("#tbodyId");
    			   tBody.empty();
    			   //2.迭代data，将data添加到Body中
    			   for(var i in data){
    				   var tr=$("<tr></tr>");
    				   tr.data("data",data[i]);
    				   //创建td元素
    				   //将td元素追加到tr中
    				   tr.append(tds);
    				   //将tr追加到tBody中
    				   tBody.append(tr);
    			   }
    		   } --%>
    		
    		
    		  $.ajax({//这个是ajax请求
	                <%-- url:"<%=request.getContextPath()%>/wx/findRoomEquipmentByUser.do?roomNumber="+roomId, --%>
	                url:"<%=request.getContextPath()%>/cotol/findRoomEquipmentByUser.do?roomNumber="+500,
	                 type:"POST",
	                 success:function(data){
	                     for(var i=0;i<data.data.length;i++){//data.length是获取data的长度。for循环
	                    	 //$("#first").append("<li>"+data.data[i].roomEquipment+"</li>");
	                    	// <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
	                        // <span class="mui-icon mui-icon-home smart-icon"></span>
	                        // <div class="mui-media-body" id="gobackhome1">回家</div>
	                     	// </li>
	                        var userid = data.data[i].deviceId
	                         $("#first").append("<li  class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\" style=\"width:20%;padding-left: 0px;\">" +
	                          "<span id=\""+data.data[i].deviceId+"\" code=\""+data.data[i].deviceCode+"\" class=\"mui-icon mui-icon-home smart-icon\"></span>" +
	                         "<div  class=\"mui-media-body\" >" +
	                         data.data[i].name+"</div>"
	                         +
	                         //"<input type=\"radio\" name=\"radio\" value=\"1\">开"+
	                         //"<input type=\"radio\" name=\"radio\" value=\"1\">关"+
	                         //"<input type=\"radio\" name=\"radio\" value=\"1\">停"+
	                         //abc(data.data[i].deviceId)+
	                         "</li>"); //如果添加class或者id内容要加单引号例如：$("#first").append("<li class='a'>"+data[i].name+"</li>");
				    		 $(document).on("click", "#"+data.data[i].deviceId, function(e) {
				    			 // console.log($("#first > li:nth-child("+data.data[i].deviceId+") > span").attr("id"))
				    			 // console.log($(this).attr('id'))//可以去除ajax加载后的id
				    			 
				    			location.href = "<%=request.getContextPath()%>/cotol/doAllOperate.do" +"?renter_id="+renterId+"&room_id="+roomId+"&timestamp="+timestamp+"&sign="+sign+"&e="+$(this).attr('code')
				    					
				    	//		 switch ($(this).attr('code')) {
				    	//		 	case  'AutoLock' :  location.href = "/wx/doAutoLockOperate.do" +"?renter_id="+renterId+"&room_id="+roomId+"&timestamp="+timestamp+"&sign="+sign
				    	//		 		break;
				    	//		 	case  'Switch' : location.href = "/wx/doSwitchOperate.do" +"?renter_id="+renterId+"&room_id="+roomId+"&timestamp="+timestamp+"&sign="+sign
				    	//		 		break;
				    	//		 	case  'Curtain' : location.href = "/wx/doCurtainOperate.do" +"?renter_id="+renterId+"&room_id="+roomId+"&timestamp="+timestamp+"&sign="+sign
				    	//		 		break;
				    	//		 	case  'InfraredForward' : location.href = "/wx/doInfraredForwardOperate.do" +"?renter_id="+renterId+"&room_id="+roomId+"&timestamp="+timestamp+"&sign="+sign
				    	//		 		break;
				    	//		 }
				    			 // console.log(data.target)
				    		 });
			                         
		    			 	//console.log(data.data[i].deviceId)
	                     }
	                 }
	             });
    		 
    		 
    		 
	    	function abc(deviceId){
	    		var tds = ''
	    			$.ajax({//这个是ajax请求
	                url:"<%=request.getContextPath()%>/wx/findOperationByEquipmentId.do?deviceId="+deviceId,
	                 type:"POST",
	                 success:function(data){
	                     for(var i=0;i<data.length;i++){//data.length是获取data的长度。for循环
	                    	 //console.log(data[i].operate)
	                    	 tds += "<input type=\"radio\" name=\"radio\" value=\"1\">" +data[i].operate;
	                    	 
	                    	 //console.log(tds)
	                    	 // <input type="radio" name="radio" value="1">红
	                     	//<input type="radio" name="radio" value="1">黄
	                     	//<input type="radio" name="radio" value="1">绿
	                     	//<input type="radio" name="radio" value="1">蓝
	                         //$("#second").append("<input type=\"radio\" name=\"radio\" value=\"1\">" +data[i].operate);
	                     }
	                 }
	             });
	    	}
	    	//console.log("------")
	    	var qwe =abc(111)
	    	//console.log(qwe) 
    	})
    </script>
</body>
</html>